<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>拼团商品 - 手写MyBatis：渐进式源码实践</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "PingFang SC", "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
            max-width: 600px;
            margin: 0 auto;
            padding: 15px;
            min-height: 100vh;
        }

        .container {
            background-color: #fff;
            border-radius: 16px;
            overflow: hidden;
            margin: 0 auto;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
        }

        /* 轮播图样式 */
        .carousel-container {
            position: relative;
            width: 100%;
            height: 350px;
            overflow: hidden;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }

        .carousel-wrapper {
            display: flex;
            transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            height: 100%;
        }

        .carousel-item {
            flex: 0 0 100%;
            height: 100%;
            background: linear-gradient(120deg, #f6f7f9 0%, #eaeef4 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #666;
            font-size: 18px;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .carousel-item:hover {
            background: linear-gradient(120deg, #eaeef4 0%, #f6f7f9 100%);
        }

        .carousel-dots {
            position: absolute;
            bottom: 15px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 8px;
            background-color: rgba(255, 255, 255, 0.7);
            padding: 6px 12px;
            border-radius: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, 0.2);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .dot.active {
            background-color: #FF3300;
            width: 20px;
            border-radius: 5px;
            box-shadow: 0 0 6px rgba(255, 51, 0, 0.4);
        }

        /* 商品信息样式 */
        .product-info {
            padding: 20px;
        }

        .product-title {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 15px;
            color: #333;
            text-align: center;
            line-height: 1.4;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
        }

        /* 促销信息样式 */
        .promotion-bar {
            background: linear-gradient(to right, #FFF9E0, #FFEFD1);
            color: #FF5000;
            padding: 15px;
            border-radius: 12px;
            font-size: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 15px 0;
            font-weight: bold;
            box-shadow: 0 3px 8px rgba(255, 80, 0, 0.1);
            border-left: 4px solid #FF7A31;
            position: relative;
            overflow: hidden;
        }

        .promotion-bar:before {
            content: '';
            position: absolute;
            top: -10px;
            right: -10px;
            width: 40px;
            height: 40px;
            background-color: rgba(255, 255, 255, 0.4);
            border-radius: 50%;
        }

        /* 拼团用户信息 */
        .group-user {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px;
            background-color: #FAFBFC;
            border-radius: 12px;
            margin-bottom: 12px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
            transition: all 0.3s ease;
            border: 1px solid rgba(0, 0, 0, 0.06);
        }

        .group-user:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
        }

        .group-user-left {
            display: flex;
            align-items: center;
        }

        .avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: linear-gradient(135deg, #f0f0f0, #e6e6e6);
            margin-right: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #666;
            font-size: 14px;
            overflow: hidden;
            box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
            position: relative;
        }

        .avatar:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(120deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 70%);
        }

        .user-name {
            font-size: 15px;
            font-weight: 600;
            color: #333;
        }

        .group-info {
            display: flex;
            align-items: center;
            color: #FF5000;
        }

        .countdown {
            margin-right: 12px;
            font-size: 14px;
            font-weight: 500;
            background-color: rgba(255, 80, 0, 0.1);
            padding: 5px 10px;
            border-radius: 4px;
        }

        .join-btn {
            background: linear-gradient(to right, #FF3300, #FF6833);
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 22px;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
            box-shadow: 0 3px 10px rgba(255, 51, 0, 0.2);
            transition: all 0.3s ease;
        }

        .join-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(255, 51, 0, 0.3);
        }

        .join-btn:active {
            transform: translateY(1px);
            box-shadow: 0 2px 8px rgba(255, 51, 0, 0.3);
        }

        /* 价格信息 */
        .price-box {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 22px;
            background: linear-gradient(to right, #FFF5F2, #FFF9F8);
            border-radius: 14px;
            margin-top: 20px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
            position: relative;
            border: 1px solid rgba(255, 51, 0, 0.1);
        }

        .price-box:before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 5px;
            height: 100%;
            background: linear-gradient(to bottom, #FF3300, transparent);
            border-radius: 14px 0 0 14px;
        }

        .price {
            color: #FF3300;
            font-size: 28px;
            font-weight: 700;
            text-shadow: 0 1px 1px rgba(255, 51, 0, 0.1);
        }

        .original-price {
            color: #999;
            font-size: 15px;
            text-decoration: line-through;
            margin-top: 6px;
        }

        .buy-buttons {
            display: flex;
            gap: 12px;
        }

        .single-buy {
            background-color: #FFF0EC;
            color: #FF3300;
            border: 1px solid rgba(255, 51, 0, 0.2);
            padding: 12px 18px;
            border-radius: 24px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .single-buy:hover {
            background-color: #FFE7E3;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(255, 51, 0, 0.15);
        }

        .group-buy {
            background: linear-gradient(to right, #FF3300, #FF5500);
            color: white;
            border: none;
            padding: 12px 18px;
            border-radius: 24px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(255, 51, 0, 0.25);
            transition: all 0.3s ease;
        }

        .group-buy:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(255, 51, 0, 0.3);
        }

        .group-buy:active, .single-buy:active {
            transform: translateY(1px);
        }

        /* 弹窗基础样式 */
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(3px);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            visibility: hidden;
            opacity: 0;
            transition: visibility 0s linear 0.25s, opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .overlay.visible {
            visibility: visible;
            opacity: 1;
            transition-delay: 0s;
        }

        /* 支付弹窗样式 */
        .payment-popup {
            background-color: white;
            width: 90%;
            max-width: 400px;
            border-radius: 16px;
            padding: 25px;
            text-align: center;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            position: relative;
            animation: slideUp 0.4s cubic-bezier(0.19, 1, 0.22, 1);
            transform: translateY(0);
        }

        @keyframes slideUp {
            0% {
                opacity: 0;
                transform: translateY(20px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .payment-title {
            font-size: 22px;
            font-weight: bold;
            margin-bottom: 12px;
            color: #333;
        }

        .payment-amount {
            font-size: 18px;
            color: #666;
            margin-bottom: 25px;
            background-color: rgba(7, 193, 96, 0.1);
            padding: 8px 16px;
            border-radius: 20px;
            display: inline-block;
        }

        .qr-code-container {
            width: 220px;
            height: 220px;
            margin: 0 auto 25px;
            border: 1px solid #eee;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
            background: linear-gradient(145deg, #f0f0f0, #ffffff);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
            font-size: 16px;
            position: relative;
        }

        .qr-code-container:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: repeating-linear-gradient(
                -45deg,
                transparent,
                transparent 10px,
                rgba(0, 0, 0, 0.02) 10px,
                rgba(0, 0, 0, 0.02) 20px
            );
            border-radius: 16px;
        }

        .payment-buttons {
            display: flex;
            justify-content: space-between;
            margin-top: 25px;
        }

        .cancel-btn {
            background: linear-gradient(to bottom, #f9f9f9, #f0f0f0);
            color: #666;
            border: 1px solid #ddd;
            padding: 12px 0;
            border-radius: 24px;
            font-size: 15px;
            font-weight: 500;
            cursor: pointer;
            width: 45%;
            transition: all 0.3s ease;
        }

        .cancel-btn:hover {
            background: #f0f0f0;
            color: #444;
        }

        .complete-btn {
            background: linear-gradient(to right, #07C160, #10D56C);
            color: white;
            border: none;
            padding: 12px 0;
            border-radius: 24px;
            font-size: 15px;
            font-weight: bold;
            cursor: pointer;
            width: 45%;
            box-shadow: 0 4px 12px rgba(7, 193, 96, 0.2);
            transition: all 0.3s ease;
        }

        .complete-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(7, 193, 96, 0.3);
        }

        .complete-btn:active, .cancel-btn:active {
            transform: translateY(1px);
        }

        /* 登录弹窗样式 */
        .login-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(rgba(221, 222, 238, 0.92), rgba(201, 202, 228, 0.92));
            backdrop-filter: blur(5px);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            visibility: hidden;
            opacity: 0;
            transition: visibility 0s linear 0.25s, opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .login-overlay.visible {
            visibility: visible;
            opacity: 1;
            transition-delay: 0s;
        }

        .login-popup {
            background-color: white;
            width: 90%;
            max-width: 400px;
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            animation: popIn 0.4s cubic-bezier(0.19, 1, 0.22, 1);
            transform: scale(1);
        }

        @keyframes popIn {
            0% {
                opacity: 0;
                transform: scale(0.95);
            }
            100% {
                opacity: 1;
                transform: scale(1);
            }
        }

        .login-title {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 25px;
            text-align: center;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
            color: #444;
            position: relative;
        }

        .login-title:after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: -1px;
            width: 100px;
            height: 3px;
            background: linear-gradient(to right, #26A9E5, #45C8FF);
            transform: translateX(-50%);
            border-radius: 3px;
        }

        .login-form input {
            width: 100%;
            padding: 16px;
            margin-bottom: 18px;
            border: 1px solid #ddd;
            border-radius: 12px;
            font-size: 16px;
            outline: none;
            transition: all 0.3s ease;
            background-color: #f9f9f9;
        }

        .login-form input:focus {
            border-color: #26A9E5;
            box-shadow: 0 0 0 3px rgba(38, 169, 229, 0.15);
            background-color: #fff;
        }

        .login-form input::placeholder {
            color: #bbb;
        }

        .login-btn {
            background: linear-gradient(to right, #26A9E5, #54BDFF);
            color: white;
            border: none;
            padding: 16px 0;
            border-radius: 12px;
            font-size: 17px;
            font-weight: bold;
            cursor: pointer;
            width: 100%;
            margin-top: 15px;
            box-shadow: 0 4px 15px rgba(38, 169, 229, 0.3);
            transition: all 0.3s ease;
        }

        .login-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(38, 169, 229, 0.4);
        }

        .login-btn:active {
            transform: translateY(1px);
            box-shadow: 0 3px 10px rgba(38, 169, 229, 0.3);
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 轮播图 -->
        <div class="carousel-container">
            <div class="carousel-wrapper">
                <div class="carousel-item">
                    <div>商品图片 1</div>
                </div>
                <div class="carousel-item">
                    <div>商品图片 2</div>
                </div>
                <div class="carousel-item">
                    <div>商品图片 3</div>
                </div>
            </div>
            <div class="carousel-dots">
                <div class="dot active"></div>
                <div class="dot"></div>
                <div class="dot"></div>
            </div>
        </div>

        <!-- 商品信息 -->
        <div class="product-info">
            <div class="product-title">手写MyBatis：渐进式源码实践（全彩）</div>
            
            <!-- 促销信息 -->
            <div class="promotion-bar">
                大促优惠！直降 ¥60，76人再抢，参与马上抢到
            </div>
            
            <!-- 拼团用户信息 -->
            <div class="group-user">
                <div class="group-user-left">
                    <div class="avatar">小傅哥</div>
                    <div class="user-name">小傅哥</div>
                </div>
                <div class="group-info">
                    <div class="countdown">拼单即将结束 00:05:49</div>
                    <button class="join-btn">立即抢单</button>
                </div>
            </div>
            
            <div class="group-user">
                <div class="group-user-left">
                    <div class="avatar">李二狗</div>
                    <div class="user-name">李二狗</div>
                </div>
                <div class="group-info">
                    <div class="countdown">拼单即将结束 00:05:49</div>
                    <button class="join-btn">立即抢单</button>
                </div>
            </div>
            
            <!-- 价格信息 -->
            <div class="price-box">
                <div class="price-info">
                    <div class="price">¥ 100</div>
                    <div class="original-price">¥ 80</div>
                </div>
                <div class="buy-buttons">
                    <button class="single-buy" id="singleBuyBtn">单独购买 ¥80</button>
                    <button class="group-buy" id="groupBuyBtn">开团购买 ¥100</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 支付弹窗 -->
    <div class="overlay" id="paymentOverlay">
        <div class="payment-popup">
            <div class="payment-title">请扫码支付</div>
            <div class="payment-amount">支付金额 ¥40</div>
            <div class="qr-code-container">
                二维码
            </div>
            <div class="payment-buttons">
                <button class="cancel-btn" id="cancelBtn">取消支付</button>
                <button class="complete-btn" id="completeBtn">支付完成</button>
            </div>
        </div>
    </div>

    <!-- 登录弹窗 -->
    <div class="login-overlay" id="loginOverlay">
        <div class="login-popup">
            <div class="login-title">欢迎登录 - 小傅哥拼团</div>
            <div class="login-form">
                <input type="text" placeholder="用户名" id="username">
                <input type="password" placeholder="密码" id="password">
                <button class="login-btn" id="loginBtn">登录</button>
            </div>
        </div>
    </div>

    <script>
        // API配置和数据存储
        const API = {
            baseUrl: 'http://localhost:8091',
            endpoints: {
                marketConfig: '/api/v1/gbm/index/query_group_buy_market_config'
            }
        };
        
        // 全局数据对象
        let appData = {
            userId: 'xfg01',
            source: 's01',
            channel: 'c01',
            goodsId: '9890001',
            goods: null,
            teamList: [],
            teamStatistic: null
        };

        // 轮播图逻辑
        document.addEventListener('DOMContentLoaded', function() {
            // 加载商品和拼团数据
            loadMarketData();
            
            const carouselWrapper = document.querySelector('.carousel-wrapper');
            const dots = document.querySelectorAll('.dot');
            let currentIndex = 0;
            
            // 自动轮播
            function autoSlide() {
                currentIndex = (currentIndex + 1) % 3;
                updateCarousel();
            }
            
            // 更新轮播图状态
            function updateCarousel() {
                carouselWrapper.style.transform = `translateX(-${currentIndex * 100}%)`;
                dots.forEach((dot, index) => {
                    dot.classList.toggle('active', index === currentIndex);
                });
            }
            
            // 点击小点切换图片
            dots.forEach((dot, index) => {
                dot.addEventListener('click', () => {
                    currentIndex = index;
                    updateCarousel();
                    resetInterval();
                });
            });
            
            // 设置自动轮播计时器
            let slideshowInterval = setInterval(autoSlide, 3000);
            
            // 重置计时器
            function resetInterval() {
                clearInterval(slideshowInterval);
                slideshowInterval = setInterval(autoSlide, 3000);
            }
            
            // 倒计时功能
            function startCountdown() {
                const countdownElements = document.querySelectorAll('.countdown');
                let minutes = 5;
                let seconds = 49;
                
                function updateCountdown() {
                    seconds--;
                    if (seconds < 0) {
                        seconds = 59;
                        minutes--;
                    }
                    
                    if (minutes < 0) {
                        minutes = 0;
                        seconds = 0;
                    }
                    
                    const formattedTime = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
                    countdownElements.forEach(el => {
                        el.textContent = `拼单即将结束 00:${formattedTime}`;
                    });
                    
                    if (minutes === 0 && seconds === 0) {
                        clearInterval(countdownInterval);
                    }
                }
                
                const countdownInterval = setInterval(updateCountdown, 1000);
            }
            
            startCountdown();
            
            // 支付和登录弹窗功能
            const paymentOverlay = document.getElementById('paymentOverlay');
            const loginOverlay = document.getElementById('loginOverlay');
            const singleBuyBtn = document.getElementById('singleBuyBtn');
            const groupBuyBtn = document.getElementById('groupBuyBtn');
            const cancelBtn = document.getElementById('cancelBtn');
            const completeBtn = document.getElementById('completeBtn');
            const loginBtn = document.getElementById('loginBtn');
            const joinBtns = document.querySelectorAll('.join-btn');
            
            // 模拟登录状态
            let isLoggedIn = false;
            
            // 检查登录状态并处理点击事件
            function checkLoginAndProceed(action, teamId) {
                if (isLoggedIn) {
                    // 用户已登录，显示支付弹窗并更新支付信息
                    updatePaymentInfo();
                    paymentOverlay.classList.add('visible');
                } else {
                    // 用户未登录，显示登录弹窗
                    loginOverlay.classList.add('visible');
                }
            }
            
            // 点击"单独购买"和"开团购买"按钮
            singleBuyBtn.addEventListener('click', function() {
                checkLoginAndProceed('single');
            });
            
            groupBuyBtn.addEventListener('click', function() {
                checkLoginAndProceed('group');
            });
            
            // 点击"立即抢单"按钮
            joinBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    const teamId = this.getAttribute('data-team-id');
                    checkLoginAndProceed('join', teamId);
                });
            });
            
            // 点击"取消支付"按钮，关闭支付弹窗
            cancelBtn.addEventListener('click', function() {
                paymentOverlay.classList.remove('visible');
            });
            
            // 点击"支付完成"按钮，关闭支付弹窗
            completeBtn.addEventListener('click', function() {
                alert('支付成功！');
                paymentOverlay.classList.remove('visible');
            });
            
            // 点击"登录"按钮
            loginBtn.addEventListener('click', function() {
                const username = document.getElementById('username').value;
                const password = document.getElementById('password').value;
                
                if (username && password) {
                    // 模拟登录成功
                    isLoggedIn = true;
                    loginOverlay.classList.remove('visible');
                    paymentOverlay.classList.add('visible');
                } else {
                    alert('请输入用户名和密码');
                }
            });
            
            // 点击弹窗外部区域，关闭弹窗
            paymentOverlay.addEventListener('click', function(e) {
                if (e.target === paymentOverlay) {
                    paymentOverlay.classList.remove('visible');
                }
            });
            
            loginOverlay.addEventListener('click', function(e) {
                if (e.target === loginOverlay) {
                    loginOverlay.classList.remove('visible');
                }
            });
        });

        // 从后端加载市场数据
        async function loadMarketData() {
            try {
                const response = await fetch(`${API.baseUrl}${API.endpoints.marketConfig}`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        userId: appData.userId,
                        source: appData.source,
                        channel: appData.channel,
                        goodsId: appData.goodsId
                    })
                });
                
                const result = await response.json();
                
                if (result.code === '0000') {
                    // 存储数据
                    appData.goods = result.data.goods;
                    appData.teamList = result.data.teamList;
                    appData.teamStatistic = result.data.teamStatistic;
                    
                    // 更新UI
                    updateUI();
                    console.log('数据加载成功:', result.data);
                } else {
                    console.error('API返回错误:', result.info);
                }
            } catch (error) {
                console.error('获取数据失败:', error);
            }
        }
        
        // 更新UI显示
        function updateUI() {
            updateGoodsInfo();
            updateTeamList();
            updateStatistics();
        }
        
        // 更新商品信息
        function updateGoodsInfo() {
            if (!appData.goods) return;
            
            // 更新商品标题 - 这里使用了静态标题，如需动态可以添加
            // document.querySelector('.product-title').textContent = '...';
            
            // 更新价格信息 - 主价格显示为拼团价格
            const priceElement = document.querySelector('.price');
            const originalPriceElement = document.querySelector('.original-price');
            
            if (priceElement && appData.goods.payPrice) {
                priceElement.textContent = `¥ ${appData.goods.payPrice.toFixed(2)}`;
            }
            
            if (originalPriceElement && appData.goods.originalPrice) {
                originalPriceElement.textContent = `¥ ${appData.goods.originalPrice.toFixed(2)}`;
            }
            
            // 更新促销信息
            const promotionElement = document.querySelector('.promotion-bar');
            if (promotionElement && appData.goods.deductionPrice && appData.teamStatistic) {
                const deductionPrice = appData.goods.deductionPrice.toFixed(2);
                const userCount = appData.teamStatistic.allTeamUserCount || 0;
                promotionElement.textContent = `大促优惠！直降 ¥${deductionPrice}，${userCount}人再抢，参与马上抢到`;
            }
            
            // 更新购买按钮的文本
            const singleBuyBtn = document.getElementById('singleBuyBtn');
            const groupBuyBtn = document.getElementById('groupBuyBtn');
            
            if (singleBuyBtn && appData.goods.originalPrice) {
                singleBuyBtn.textContent = `单独购买 ¥${appData.goods.originalPrice.toFixed(2)}`;
            }
            
            if (groupBuyBtn && appData.goods.payPrice) {
                groupBuyBtn.textContent = `开团购买 ¥${appData.goods.payPrice.toFixed(2)}`;
            }
        }
        
        // 更新团队列表
        function updateTeamList() {
            // 获取团队列表容器
            const productInfo = document.querySelector('.product-info');
            const priceBox = document.querySelector('.price-box');
            
            // 清除现有的团队用户元素
            const existingTeams = document.querySelectorAll('.group-user');
            existingTeams.forEach(team => team.remove());
            
            // 移除可能存在的提示信息
            const existingPrompt = document.querySelector('.no-team-prompt');
            if (existingPrompt) {
                existingPrompt.remove();
            }
            
            // 检查团队列表是否为空
            if (!appData.teamList || appData.teamList.length === 0) {
                // 创建提示元素
                const promptElement = document.createElement('div');
                promptElement.className = 'group-user no-team-prompt';
                promptElement.style.textAlign = 'center';
                promptElement.style.color = '#FF5000';
                promptElement.style.fontWeight = 'bold';
                promptElement.innerHTML = `
                    <div style="padding: 15px;">
                        小伙伴，赶紧去开团吧，做村里最靓的仔。
                    </div>
                `;
                
                // 将提示元素插入到价格框之前
                productInfo.insertBefore(promptElement, priceBox);
                return;
            }
            
            // 创建团队用户元素
            appData.teamList.forEach(team => {
                const teamElement = createTeamElement(team);
                productInfo.insertBefore(teamElement, priceBox);
            });
        }
        
        // 创建团队元素
        function createTeamElement(team) {
            const div = document.createElement('div');
            div.className = 'group-user';
            div.dataset.teamId = team.teamId;
            
            // 计算剩余人数
            const remainingCount = team.targetCount - team.lockCount;
            const remainingText = remainingCount > 0 ? `还差${remainingCount}人` : "已满员";
            
            div.innerHTML = `
                <div class="group-user-left">
                    <div class="avatar">${team.userId.substring(0, 2)}</div>
                    <div class="user-name">${team.userId} (${remainingText})</div>
                </div>
                <div class="group-info">
                    <div class="countdown">${team.validTimeCountdown}</div>
                    <button class="join-btn" data-team-id="${team.teamId}">立即抢单</button>
                </div>
            `;
            
            // 为新创建的按钮添加事件监听器
            div.querySelector('.join-btn').addEventListener('click', function() {
                const teamId = this.getAttribute('data-team-id');
                checkLoginAndProceed('join', teamId);
            });
            
            return div;
        }
        
        // 更新统计信息
        function updateStatistics() {
            if (!appData.teamStatistic) return;
            
            // 这里可以添加统计信息显示
            console.log('团队统计:', appData.teamStatistic);
        }
        
        // 检查登录状态并处理
        function checkLoginAndProceed(action, teamId) {
            // 存储当前操作信息
            appData.currentAction = {
                type: action,
                teamId: teamId
            };
            
            if (isLoggedIn) {
                // 用户已登录，显示支付弹窗并更新支付信息
                updatePaymentInfo();
                paymentOverlay.classList.add('visible');
            } else {
                // 用户未登录，显示登录弹窗
                loginOverlay.classList.add('visible');
            }
        }
        
        // 更新支付信息
        function updatePaymentInfo() {
            if (!appData.goods) return;
            
            const paymentAmount = document.querySelector('.payment-amount');
            if (paymentAmount) {
                paymentAmount.textContent = `支付金额 ¥${appData.goods.payPrice.toFixed(2)}`;
            }
        }
    </script>
</body>
</html>